<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#join th{background-color:#f5f5f5; text-align:left;padding-left:20px;height:20px;width:100px}
#join td{padding-left: 20px}
#join tr{border-bottom:1px solid gray}
</style>
<script>
function check(){	

	var f = eval("document.memberModifyForm");
	
	if((f.name.value=="") || (f.name.value.length<=1)) {
		alert("이름을 제대로 입력해 주세요");
		f.name.focus();
		return false;
	}
	
	else if(f.id.value == "") {
		alert("아이디를 입력하세요");
		f.id.focus();
		return false;
	}

        	
	else if(f.nickname.value == "") {
		alert("NICKNAME을 입력하세요");
		f.nickname.focus();
		return false;
	}
	
	else if(f.passwd.value == "") {
		alert("비밀번호를 입력하세요");
		f.passwd.focus();
		return false;
	}
	
	else if(f.passwd.value != f.passwd2.value) {
		alert("비밀번호가 일치하지 않습니다");
		f.passwd.value = "";
		f.passwd2.value = "";
		f.passwd.focus();
		return false;
	}
	
	else if((f.jumin1.value == "") || (f.jumin1.value.length<6)){
		alert("주민등록번호 앞의 6자리를 입력해 주세요");
		f.jumin1.focus();
		return false;
	}
	
	else if((f.jumin2.value == "") || (f.jumin2.value.length<7)){
		alert("주민등록번호 뒤의 7자리를 입력해 주세요");
		f.jumin2.focus();
		return false;
	}
	
	else if(f.email.value == "") {
		alert("이메일을 제대로 입력하세요");
		f.email.focus();
		return false;
	}
	
	else if(f.phone1.value.length==0 || f.phone2.value.length==0 || f.phone3.value.length==0){
		alert("집 전화를 입력하세요");
		f.phone1.focus();
		return false;
	}
	
	else if((f.zip.value=="") || (f.zip.value.length<6)){
		alert("우편번호에 '-'를 붙여 6자리를 입력해주세요");
		f.zip.focus();
		return false;
	}
	
	else if(f.addr1.value.length==0){
		alert("집주소를 입력하세요");
		f.addr1.focus();
		return false;
	}
	
	else if(f.addr2.value.length==0){
		alert("상세주소를 입력하세요");
		f.addr2.focus();
		return false;
	}
	
	else if((f.mobile1.value.length==0) || (f.mobile2.value.length==0) || (f.mobile3.value.length==0)) {
		alert("휴대폰 번호를 입력하세요");
		f.mobile1.focus();
		return false;
	}
	
	return true;
}

function openConfirmId(joinform){

	var url = "./memberIdCheckAction.action?id="+document.joinform.id.value;
	
	if(document.joinform.id.value.length==0){
		alert("아이디를 입력하세요");
		document.joinform.id.focus();
		return false;
	}
	open(url ,"confirm","toolbar=no, location=no, status=co, menubar=no, scrollbars=no, resizable=no, width=400, height=200");
}

function openConfirmNickname(joinform){

	var url = "./memberNickCheckAction.action?nickname="+document.joinform.nickname.value;
	
	if(document.joinform.nickname.value.length==0){
		alert("별명을 입력하세요");
		document.joinform.nickname.focus();
		return false;
	}
	open(url ,"confirm","toolbar=no, location=no, status=co, menubar=no, scrollbars=no, resizable=no, width=400, height=200");
}

function openZipcode(joinform){
	var url="./zipModifyCheckAction.action";
	open(url, "confirm","toolbar=no, location=no, status=no, menubar=no, scrollbars=yes, resizable=no, width=410, height=400");
}

function openDeleteCheck(memberModifyForm){
	var url="./memberDeleteCheckAction.action";
	open(url, "confirm","toolbar=no, location=no, status=no, menubar=no, scrollbars=yes, resizable=no, width=450, height=300");
}

</script>
</head>
<body>
<!-- 회원가입 -->

<form name="memberModifyForm" action="memberModifyAction.action" method="post" onsubmit="return check()">
<div style="margin-top:50px;height:700px">
	<ul style="margin:30px auto 10px;width:780px;font-family:UnYetgulWeb;font-size:20pt;">
	<s:if test="resultClass==null">
	<li style="color:blue"><font color="black">회원가입</font></li>
	</s:if>
	<s:else>
	<li style="color:blue"><font color="black">회원수정</font></li>
	</s:else>
	</ul>
	<table style="margin:auto;width:750px;height:500px;font-size:10pt" id="join">
		<tbody>
			<tr style="border-top:2px solid gray">
				<th>아이디</th>
					&nbsp;<td>${resultClass.id}</td>
			</td>
		</tr>

		<tr>
			<th>비밀번호</th>
			<td>
				<input type="password" name="passwd" value="${resultClass.passwd}" size="15"class="off"  maxlength="8" onfocus="on(this)" onblur="off(this)"/>
				<font size="2">영문, 숫자조합 4~8자리</font>
			</td>
		</tr>
		<tr>
			<th>비밀번호 확인</th>
			<td>
				<input type="password" name="passwd2" class="off" size="15" maxlength="8" onfocus="on(this)" onblur="off(this)"/>
			</td>
		</tr>	

		<tr>
			<th>이름</th>
				<td>
					<input type="text" name="name" value="${resultClass.name}" class="off"  size="20" onfocus="on(this)" onblur="off(this)"/>
				</td>
		</tr>

		<tr>
			<th>별명</th>
			<td>
				<input type="text" name="nickname" value="${resultClass.nickname}" class="off"  size="10" maxlength="15" onfocus="on(this)" onblur="off(this)"/>
				<input type="button" name="confirm_nick" value="중복확인" onclick="openConfirmNickname(this.form)" />
			</td>
		</tr>

		<tr>
			<th>주민등록번호</th>
				&nbsp;<td>${resultClass.jumin1} - ${resultClass.jumin2}</td>
		</tr>
		<tr>
			<th>이메일 주소</th>
			<td>
				<input type="text" name="email" value="${resultClass.email}" class="off" size="30" onfocus="on(this)" onblur="off(this)"/>
			</td>
		</tr>
		<tr>
			<th>집전화</th>
			<td>
				<input type="text" name="phone1" value="${resultClass.phone1}" class="off" size="6" maxlength="4" style="margin-right:5px" onfocus="on(this)" onblur="off(this)"/>-
				<input type="text" name="phone2" value="${resultClass.phone2}" class="off" size="10" maxlength="4" style="margin-right:5px" onfocus="on(this)" onblur="off(this)"/>-
				<input type="text" name="phone3" value="${resultClass.phone3}" class="off" size="10" maxlength="4" onfocus="on(this)" onblur="off(this)"/>
			</td>
		</tr>
		
		<tr>
			<th>휴대폰</th>
			<td>
				<select name="mobile1" id="mobile1" style="margin-right:5px">
					<option value="${resultClass.mobile1}" selected>${resultClass.mobile1}</option>
					<option value="010">010</option>
					<option value="011">011</option>
					<option value="016">016</option>
					<option value="017">017</option>
					<option value="018">018</option>
					<option value="019">019</option>
				</select>-
				<input type=text name="mobile2" value="${resultClass.mobile2}" class="off" size="8" maxlength="4" style="margin-right:5px" onfocus="on(this)" onblur="off(this)"/>-
				<input type=text name="mobile3" value="${resultClass.mobile3}" class="off" size="8" maxlength="4" onfocus="on(this)" onblur="off(this)"/>
			</td>
		</tr>
				
		<tr>
			<th>우편번호</th>
			<td>
				<input type="text" value="${resultClass.zip}" class="off" name="zip" size="12" readonly/>
				<input type="button" name="zipcode" value="우편번호 검색" onclick="openZipcode(this.form)" >
			</td>
		</tr>
		<tr style="border-bottom:2px solid gray;">
			<th>주소</th>
			<td>
				<input type="text" value="${resultClass.addr1}" class="off" name="addr1" size="50" readonly/><br><br>
				<input type="text" value="${resultClass.addr2}" class="off" name="addr2" size="50" onfocus="on(this)" onblur="off(this)"/>
			</td>
		</tr>

		<tr>
			<th>가입일</th>
				&nbsp;<td>${resultClass.join_date}</td>
		</tr>

		

		

		
		</tbody>
	</table>
	
	<div style="margin:20px auto;text-align:center;">
		<input type="submit" value="수     정" onclick="location.href='memberModifyAction.action'">&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="button" value="회원탈퇴" onclick="openDeleteCheck(this.form)">&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="button" value="취     소" onclick="javascript:window.location='index.go'">
	</div>

</div>
</form>
</body>
</html>